<!--
 * @Description: 
 * @Version: 1.0.1
 * @Autor: hrlu.cn
 * @Date: 2022-06-27 21:44:06
 * @LastEditors: hrlu.cn
 * @LastEditTime: 2022-06-29 21:55:22
-->
{% extends "base.html" %}

{% block cssextend %}
    <link href="/assets/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/assets/css/bootstrap-table-custom.css" rel="stylesheet">
{% endblock %}

{% block cssstyle %}
{% endblock %}

{% block content %}
     <!-- DATA TABLE-->
     <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="statistic-chart-1">
                        <!--h3 class="title-3 m-b-30">Achievement</h3-->
                        
                        <table id="achievement-table" class="table table-hover">
                            <thead>
                                <tr>
                                    <th data-field="scode" data-sortable="true">股票代码</th>
                                    <th data-align="center" data-field="sname" data-sortable="true">股票名称</th>
                                    <th data-align="center" data-field="industry" data-sortable="true">所属行业</th>
                                    <th data-align="center" data-field="quarter" data-sortable="true">统计季度</th>
                                    <!--th data-align="center" data-field="report_date">报告日期</th-->
                                    <th data-align="center" data-field="roe" data-sortable="true">ROE</th>
                                    <th data-align="center" data-field="revenue" data-sortable="true">营业收入</th>
                                    <th data-align="center" data-field="total_cogs" data-sortable="true">营业成本</th>
                                    <th data-align="center" data-field="profit_dedt" data-sortable="true">扣非后净利润</th>
                                    <th data-align="center" data-field="profit_to_gr" data-sortable="true">净利率</th>
                                    <th data-align="center" data-field="assets_turn" data-sortable="true">总资产周转率</th>
                                    <th data-align="center" data-field="saleexp_to_gr" data-sortable="true">销售费用率</th>
                                    <th data-align="center" data-field="per_capita_hold" data-sortable="true">人均持股</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="" id="achievement-toolbar">
        <div class="input-group">
            <div id="filter-quarter">
                <select class="form-control form-control-sm" tabindex="-1" name="quarter" id="quarterSelect">
                    {% for p in periods %}
                        <option value="{{ p }}">{{ p }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <button id="advance-filter" class="btn btn-secondary btn-sm" onclick="$('#advance-modal').modal('toggle');">
                    <i class="zmid zmid-filter-list"></i>高级筛选
                <button>
            </div>
        </div>
    </div>
    <div class="modal fade" id="advance-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-short">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">高级筛选</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="text">已定义常量</h4>
                            <hr>
                            <div class="row">
                                <div class="col col-md-12">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <div class="btn-group">
                                                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="indicators-dropdown" class="dropdown-toggle btn btn-default btn-sm">ROE(净资产收益率)</button>
                                                <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu">
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="ROE">ROE(净资产收益率)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="TR">TR(营业收入)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="TC">TC(营业成本)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="PD">PD(扣非后净利润)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="PTG">PTG(净利率)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="AT">AT(总资产周转率)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="STG">STG(销售费用率)</button>
                                                    <button type="button" tabindex="0" class="dropdown-item indicators-btn btn-sm" value="PCH">PCH(人均持股)</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="quarter-dropdown" class="form-control dropdown-toggle btn btn-default btn-sm">{{ periods.0 }}</button>
                                            <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu">
                                                {% for p in periods %}
                                                    <button type="button" tabindex="0" class="dropdown-item quarter-btn btn-sm">{{ p }}</button>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <input type="input" id="indicator-display" class="form-control form-control-sm" disabled="" value="ROE{{ periods.0 }}">
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <h4 class="text">定义变量
                                <button class="btn btn-sm filter-add-arg"><i class="fa fa-plus-circle text-primary"></i></button>
                            </h4>
                            
                            <hr>
                            <div class="filter-args">
                                
                            </div>
                            <hr>
                            <h4 class="text">筛选条件
                                <button class="btn btn-sm filter-add-condition"><i class="fa fa-plus-circle text-primary"></i></button>
                            </h4>
                            <hr>
                            <div class="filter-conditions">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" onclick="updateUrl(false);">取消</button>
                    <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" onclick="updateUrl(true);">筛选</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detail-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-wide">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">历史数据</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <table id="achievement-table-detail" class="table table-hover">
                        <thead>
                            <tr>
                                <th data-align="center" data-field="quarter" data-sortable="true">统计季度</th>
                                <th data-align="center" data-field="roe" data-sortable="true">ROE</th>
                                <th data-align="center" data-field="revenue" data-sortable="true">营业收入</th>
                                <th data-align="center" data-field="total_cogs" data-sortable="true">营业成本</th>
                                <th data-align="center" data-field="profit_dedt" data-sortable="true">扣非后净利润</th>
                                <th data-align="center" data-field="profit_to_gr" data-sortable="true">净利率</th>
                                <th data-align="center" data-field="assets_turn" data-sortable="true">总资产周转率</th>
                                <th data-align="center" data-field="saleexp_to_gr" data-sortable="true">销售费用率</th>
                                <th data-align="center" data-field="per_capita_hold" data-sortable="true">人均持股</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block jsextend %}
    <script src="/assets/vendor/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script src="/assets/vendor/tableexport/tableExport.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/bootstrap-table-export.min.js"></script>
    <!--script src="/assets/vendor/jspdf/jspdf.min.js"></script>
    <script src="/assets/vendor/jspdf/jspdf.plugin.autotable.js"></script-->
    <script src="/assets/js/echarts.min.js"></script>
{% endblock %}

{% block jsscript %}
<script>
    var advanceFilterArgs = {};
    var periodChoices = {{ periods | safe }};
    var indicatorChoices = ['ROE', 'TR', 'TC', 'PD', 'PTG', 'AT', 'STG', 'PCH'];
    var argChoices = [];
    var enableAdvanceFilter = false;
    for (var p in periodChoices) {
        for (var i in indicatorChoices) {
            argChoices.push( indicatorChoices[i] + periodChoices[p] );
        }
    }
    var updateUrl = function (filter = false) {
        var advanceFilter = {};
        $('#advance-filter').removeClass('btn-primary').addClass('btn-secondary');

        if (typeof(filter) == 'boolean') {
            enableAdvanceFilter = filter;
        }

        if (enableAdvanceFilter == true) {
            if (checkAdvanceFilter(argChoices)) {
                advanceFilter = getAdvanceFilter();
                if (advanceFilter.conditions.length) {
                    $('#advance-filter').removeClass('btn-secondary').addClass('btn-primary');
                }
            }
        }

        tableOption.url = '/api/achievement_data?quarter=' + $('#quarterSelect').val() + '&advance_filter=' + JSON.stringify(advanceFilter);
        $('#achievement-table').bootstrapTable('refreshOptions', tableOption);
    }

    var tableOption = {
        url: '/api/achievement_data?quarter=' + $('#quarterSelect').val(),
        responseHandler: function (res, jqXHR) {
            for (var idx in res.rows) {
                var row = res.rows[idx];
                // row.quarter = row.quarter.replaceAll('0331', 'Q1').replaceAll('0630', 'Q2').replaceAll('0930', 'Q3').replaceAll('1231', 'Y');
                
                ['revenue', 'total_cogs', 'profit_dedt'].forEach(function (field) {
                    row[field] = digitFormatter(row[field], 'CNY');
                });

                ['roe', 'profit_to_gr', 'assets_turn', 'saleexp_to_gr'].forEach(function (field) {
                    row[field] = digitFormatter(row[field] / 100, 'percentage');
                });
            }
            return res;
        },
        onClickRow: function (row, elem, field) {
            detailTableOption.url = '/api/achievement_data?sort=-quarter&stock_basic=' + row.stock_basic_id;
            $('#achievement-table-detail').bootstrapTable('refreshOptions', detailTableOption);

            $('#detail-modal').modal('toggle');
        },
        align: 'center',
        search: true,
        showRefresh: true,
        showColumns: true,
        iconSize: 'sm',

        classes: 'table',
        toolbar: '#achievement-toolbar',

        sortable: true,
        serverSort: true,

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],

        showExport: true,
        exportDataType: '',
        exportTypes: ['json', 'csv', 'txt', 'sql', 'excel'], //  'pdf', 'xml', 
    };

    var detailTableOption = {
        responseHandler: tableOption.responseHandler,
        align: 'center',
        classes: 'table',
        iconSize: 'sm',

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],
    };

    $('#quarterSelect').change(updateUrl);

    $('#achievement-table').bootstrapTable(tableOption);
    $('#achievement-table-detail').bootstrapTable(detailTableOption);

    $('.indicators-btn').click(function (){
        $('#indicators-dropdown').val($(this).val());
        $('#indicators-dropdown').text($(this).text());
        $('#indicator-display').val($('#indicators-dropdown').val()+$('#quarter-dropdown').text());
    });
    $('.quarter-btn').click(function (){
        $('#quarter-dropdown').text($(this).text());
        $('#indicator-display').text($('#indicators-dropdown').val()+$('#quarter-dropdown').text());
    });

    $('.filter-add-arg').click(function (){
        $('.filter-args').append(getFilterArgElem());
    });
    
    $('.filter-add-condition').click(function () {
        $('.filter-conditions').append(getFilterConditionElem());
        updateCondition();
    });

    searchInputPopover();

    loadAdvanceFilter();
    setInterval(function() {
        if (checkAdvanceFilter(argChoices)) {
            saveAdvanceFilter();
        }
    }, 500)
</script>
{% endblock %}